<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘控制移动</title>
		<style>
			.box{
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="jquery-1.12.4.min.js"></script>
		<script>
			var ele=$('.box');
			$(document).keydown(
				function(){
					var opt=event.which;
					var left=ele.offset().left;
					var top=ele.offset().top;
					switch(opt){
						case 37:
						   ele.offset({
						   	top:top,
						   	left:left-1
						   });
						   break;
						case 38:
						   ele.offset({
						   	top:top-1,
						   	left:left
						   });
						   break;   
						case 39:
						   ele.offset({
						   	top:top,
						   	left:left+1
						   });
						   break; 
						case 40:
						   ele.offset({
						   	top:top+1,
						   	left:left
						   });
						   break;   
					}
				}
			)
		</script>
	</body>
</html>
